import React, { Component } from 'react'
import {
    View,
    StyleSheet,
    Image,
    Text,
    ScrollView,
    TouchableOpacity,
    Modal,
} from 'react-native'

import NavBar from '../../../components/PublicHeader';
import getStorageValue from '../../../utils/getStorageValue';
import fetchWebApi from '../../../public/WebApi/fetchBase';
import Layer from '../../../utils/Layer';
import AsyncStorage from '@react-native-community/async-storage';

import {
    publicMethodEllipsis,
    messageEllipsis
} from '../../../utils/publicMethodList'
import {
    Constant
} from '../../../public/js/constant';

import {
    GET_USER_INFO,
    UPDATE_USER_INFO,
    POST_SEITCHDISPLAYINFO
} from '../../../public/WebApi/myInfoDataInterface/userInfoListApi';

export default class personalData extends Component {
    constructor(props) {
        super(props)
        const {
            currentAccount,
            userType,
            showIndex,
            showPhone,
            sex,
        } = this.props.navigation.state.params
        this.state = {
            // tab左边箭头
            returnIcon: require("../../../assets/images/iconResources/returnBnt1.png"),
            topTitle: "个人资料", // 头部标题
            genderEditorModal: false,// 性别编辑弹窗 默认值
            sexSelect: sex, // 性别当前选中的值
            userType: userType,  // 判断营业执照是否已认证
            showIndex: showIndex,// 切换个人信息
            showPhone: showPhone,
            showPhoneItem: "",
            currentAccount: currentAccount,// 判断是否为企业/个人
            userInfoDatas: [],// 个人资料信息
            avatar: '',
            nickName: '',
            occupation: '',
            motto: '',
            hobby: '',
            phone: '',
            // 性别 列表
            genderEditorList: [
                {
                    sex: "男",
                    statusDefult: false
                },
                {
                    sex: "女",
                    statusDefult: false
                },
            ],
        };
    }

    componentDidMount = () => {
        // 初始化 用户信息
        this.getUserMaillist()
    }
    // 上传用户信息
    async updateUserInfo() {
        const {
            avatar,
            nickName,
            occupation,
            sexSelect,
            motto,
            hobby,
            showPhoneItem
        } = this.state
        const res = await fetchWebApi(UPDATE_USER_INFO,
            {
                token: await getStorageValue(Constant.TOKEN),
                avatar: avatar,
                nickName: nickName,
                occupation: occupation,
                sex: sexSelect,
                motto: motto,
                hobby: hobby,
                showPhone: showPhoneItem
            }, 'POST')
        if (res.status == 200) {
            Layer.showMsg('修改个人信息成功')
            this.props.navigation.state.params.refresh()
            this.props.navigation.goBack()// 返回上一级
        }
    }

    // 获取用户信息列表
    async getUserMaillist() {
        const res = await fetchWebApi(GET_USER_INFO,
            {
                token: await getStorageValue(Constant.TOKEN)
            }, 'POST');
        if (res.status == 200) {
            this.setState({
                userInfoDatas: res.data
            })
        } else if (res.status === 401) {
            await AsyncStorage.removeItem(Constant.TOKEN);
            this.props.navigation.push('Accountlogin')
            // 弹窗提示
            Layer.showMsg("获取用户信息列表失败");
        }
    }

    // 完成点击事件处理
    preservation = () => {
        this.setState({
            genderEditorModal: false
        })
    }
    // 性别修改点击事件
    selectionStatus = (item, index) => {
        const {
            genderEditorList
        } = this.state
        const newGenderList = genderEditorList
        newGenderList.map((item, newGenderListIndex) => {
            this.setState({
                statusDefult: item.statusDefult = false
            })
            if (newGenderListIndex == index) {
                this.setState({
                    statusDefult: item.statusDefult = !item.statusDefult
                })
            }
        })
    }
    // 切换个人信息
    async switchInfo() {
        const {
            showIndex
        } = this.state
        const res = await fetchWebApi(POST_SEITCHDISPLAYINFO,
            {
                token: await getStorageValue(Constant.TOKEN),
                showIndex: showIndex == 0 ? 1 : 0
            }, 'POST');
        if (res.status == 200) {
            this.props.navigation.state.params.refresh()
            if (this.state.showIndex == 0) {
                Layer.showMsg("已切换为手机号");
            } else {
                Layer.showMsg("已切换为爱好");
            }
        } else {
            // 弹窗提示
            Layer.showMsg("切换失败");
        }
    }


    // 性别编辑弹窗
    GenderEditorModalBox = () => {
        const {
            genderEditorList,
            genderEditorModal,
            sexSelect
        } = this.state
        return (
            <Modal
                animationType='fade'
                transparent={true}
                visible={genderEditorModal}>
                <View style={styles.genderEditorModalWarper}>
                    <View style={styles.genderEditorModal}>
                        <View style={styles.genderEditorModalTitle}>
                            <TouchableOpacity onPress={() => {
                                this.setState({
                                    genderEditorModal: false
                                })
                            }}>
                                <View style={styles.cancelBtn}>
                                    <Text>取消</Text>
                                </View>
                            </TouchableOpacity>
                            <Text>选择你的性别</Text>
                            <TouchableOpacity onPress={() => {
                                // 完成 点击事件处理
                                this.preservation()
                            }}>
                                <View style={styles.completeBtn}>
                                    <Text style={styles.completeText}>完成</Text>
                                </View>
                            </TouchableOpacity>
                        </View>
                        <View style={styles.genderEditorBoxWarper}>
                            {genderEditorList.map((item, index) => (
                                <TouchableOpacity key={index} onPress={() => {
                                    // 性别 修改点击事件
                                    // this.selectionStatus(item, index)
                                    this.setState({
                                        sexSelect: item.sex
                                    })
                                }}>
                                    <View style={
                                        // item.statusDefult &&
                                        sexSelect === item.sex
                                            ? styles.EditorAction : styles.EditorActionNo} >
                                        <Text>{item.sex}</Text>
                                    </View>
                                </TouchableOpacity>
                            ))}
                        </View>
                    </View>
                </View>
            </Modal>
        )
    }
    // 个人资料列表 
    UserInfoDatasTabBox = () => {
        const {
            returnIcon,
            userInfoDatas,
            avatar,
            nickName,
            occupation,
            sexSelect,
            motto,
            hobby,
            showPhoneItem,
            userType,
            currentAccount,
            showPhone
        } = this.state
        return (
            <View style={styles.padlr}>
                {userInfoDatas.map((item, index) => (
                    <View key={index}>
                        <TouchableOpacity onPress={() => {
                            this.props.navigation.push('personalPortrait', {
                                personalPortrait: item.avatar,
                                refresh: (avatar) => {
                                    this.getUserMaillist()
                                    this.setState({
                                        avatar: avatar
                                    })
                                },
                            })
                        }}>
                            <View style={styles.item}>
                                <Text style={styles.title}>头像</Text>
                                <View style={styles.row}>
                                    <Image style={styles.headPortrait}
                                        source={{
                                            uri: avatar == '' ?
                                                this.state.avatar = item.avatar : avatar
                                        }} />
                                    <Image style={styles.SystemPrompt} source={returnIcon} />
                                </View>
                            </View>
                        </TouchableOpacity>
                        <TouchableOpacity onPress={() => {
                            this.props.navigation.push('editNickname', {
                                editNickname: item.nickName,
                                refresh: (nickName) => {
                                    this.getUserMaillist()
                                    this.setState({
                                        nickName: nickName
                                    })
                                },
                            })
                        }}>
                            <View style={styles.item}>
                                <Text style={styles.title}>昵称</Text>
                                <View style={styles.row}>
                                    <Text style={styles.describe}>{
                                        nickName == '' ?
                                            this.state.nickName = item.nickName : nickName}</Text>
                                    <Image style={styles.SystemPrompt} source={returnIcon} />
                                </View>
                            </View>
                        </TouchableOpacity>
                        <TouchableOpacity onPress={() => {
                            if (item.realName == '') {
                                this.props.navigation.push('authentication', {
                                    refresh: () => {
                                        this.getUserMaillist()
                                    },
                                })
                            }
                        }} style={styles.item}>
                            <Text style={styles.title}>实名</Text>
                            <View style={styles.row}>
                                <Text style={styles.describe}>{
                                    item.realName == '' ||
                                        item.realName == undefined ? '未实名' : item.realName}</Text>
                                <Image style={styles.SystemPrompt} source={returnIcon} />
                            </View>
                        </TouchableOpacity>
                        <TouchableOpacity onPress={() => {
                            this.props.navigation.push('editingProfession', {
                                editingProfession: item.occupation,
                                refresh: (occupation) => {
                                    this.getUserMaillist()
                                    this.setState({
                                        occupation: occupation
                                    })
                                },
                            })
                        }}>
                            <View style={styles.item}>
                                <Text style={styles.title}>职业</Text>
                                <View style={styles.row}>
                                    <Text style={styles.describe}>{
                                        occupation == '' ?
                                            this.state.occupation = item.occupation : occupation}</Text>
                                    <Image style={styles.SystemPrompt} source={returnIcon} />
                                </View>
                            </View>
                        </TouchableOpacity>
                        <TouchableOpacity onPress={() => {
                            this.props.navigation.push('editSkillTag', {
                                editSkillTag: item.occupationLabel,
                                refresh: () => {
                                    this.getUserMaillist()
                                },
                            })
                        }}>
                            <View style={styles.item} >
                                <Text style={styles.title}>技能标签</Text>
                                <View style={styles.row}>
                                    {item.occupationLabel.map((item, index) => (
                                        <View key={index}>
                                            {
                                                item.length > 0 ?
                                                    <Text style={styles.describe}>{publicMethodEllipsis(item)};
                                                    </Text> : "暂无技能标签"
                                            }
                                        </View>
                                    ))}
                                    <Image style={styles.SystemPrompt} source={returnIcon} />
                                </View>
                            </View>
                        </TouchableOpacity>
                        {userType == 0 ?
                            <TouchableOpacity onPress={() => {
                                this.setState({
                                    genderEditorModal: !this.state.genderEditorModal,
                                    // sexSelect: item.sex
                                })
                            }}>
                                <View style={styles.item}>
                                    <Text style={styles.title}>性别</Text>
                                    <View style={styles.row}>
                                        <Text style={styles.describe}>
                                            {sexSelect}
                                        </Text>
                                        <Image style={styles.SystemPrompt} source={returnIcon} />
                                    </View>
                                </View>
                            </TouchableOpacity> : null}
                        <TouchableOpacity onPress={() => {
                            this.props.navigation.push('editorialMotto', {
                                editorialMotto: item.motto,
                                refresh: (motto) => {
                                    this.getUserMaillist()
                                    this.setState({
                                        motto: motto
                                    })
                                },
                            })
                        }}>
                            <View style={styles.item}>
                                <Text style={styles.title}>格言</Text>
                                <View style={styles.row}>
                                    <Text style={styles.describe}>
                                        {/* {publicMethodEllipsis(item.motto)} */}
                                        {motto == '' ?
                                            this.state.motto = messageEllipsis(item.motto) : messageEllipsis(motto)}
                                    </Text>
                                    <Image style={styles.SystemPrompt} source={returnIcon} />
                                </View>
                            </View>
                        </TouchableOpacity>
                        <TouchableOpacity onPress={() => {
                            this.props.navigation.push('editingHobbies', {
                                editingHobbies: item.hobby,
                                refresh: (hobby) => {
                                    this.getUserMaillist()
                                    this.setState({
                                        hobby: hobby
                                    })
                                },
                            })
                        }}>
                            <View style={styles.item}>
                                <Text style={styles.title}>爱好</Text>
                                <View style={styles.row}>
                                    <Text style={styles.describe}>{
                                        hobby == '' ?
                                            this.state.hobby = messageEllipsis(item.hobby) : messageEllipsis(hobby)}</Text>
                                    <Image style={styles.SystemPrompt} source={returnIcon} />
                                </View>
                            </View>
                        </TouchableOpacity>

                        <TouchableOpacity onPress={() => {
                            this.props.navigation.push('editingShowPhone', {
                                editingPhone: item.phone,
                                showPhone: showPhone,
                                refresh: (phone) => {
                                    this.getUserMaillist()
                                    this.setState({
                                        showPhoneItem: phone
                                    })
                                },
                            })
                        }}>
                            <View style={styles.item}>
                                <Text style={styles.title}>电话</Text>
                                <View style={styles.row}>
                                    <Text style={styles.describe}>{
                                        showPhoneItem == '' ?
                                            this.state.showPhoneItem = item.showPhone : showPhoneItem}</Text>
                                    <Image style={styles.SystemPrompt} source={returnIcon} />
                                </View>
                            </View>
                        </TouchableOpacity>
                        {userType == 1 ?
                            <TouchableOpacity onPress={() => {
                                this.props.navigation.push('businLicense',
                                    {
                                        currentAccount: userType,
                                        // refresh: (hobby) => {
                                        //     this.getUserMaillist()
                                        //     this.setState({
                                        //         hobby: hobby
                                        //     })
                                        // },
                                    }
                                )
                            }}>
                                <View style={styles.item}>
                                    <Text style={styles.title}>营业执照</Text>
                                    <View style={styles.row}>
                                        <Text style={styles.describe}>{
                                            currentAccount ?
                                                "已认证" : "未认证"}</Text>
                                        <Image style={styles.SystemPrompt} source={returnIcon} />
                                    </View>
                                </View>
                            </TouchableOpacity> : null}
                    </View>
                ))}
            </View>
        )
    }
    // 切换个人信息
    // SwitchDisplayInfo() {
    //     return (
    //         <TouchableOpacity style={styles.displayInfoWar}
    //             onPress={() => {
    //                 this.switchInfo()
    //             }}>
    //             <View style={styles.displayInfo}>
    //                 <Text style={styles.text}>切换展示个人信息</Text>
    //             </View>
    //         </TouchableOpacity>

    //     )
    // }
    render() {
        const {
            topTitle
        } = this.state
        return (
            <View style={styles.warper}>
                {/* 导航栏 */}
                <NavBar
                    navigation={this.props.navigation}
                    title={topTitle}
                    titleColor={"#333"}
                    right={"确定"}
                    pressRight={() => {
                        this.updateUserInfo()
                    }}
                />
                {/* 列表 */}
                <ScrollView>
                    {/* 个人资料列表 */}
                    {this.UserInfoDatasTabBox()}
                    {/* <View style={styles.item}>
                                    <Text style={styles.title}>电话号码</Text>
                                    <View style={styles.row}>
                                        <Text style={styles.describe}>{phoneEllipsis(item.phone)}</Text>
                                        <Image style={styles.SystemPrompt} 
                                        source={require("../../../assets/images/iconResources/returnBnt1.png")} />
                                    </View>
                                </View>
                              */}
                </ScrollView>
                {/* 性别编辑弹窗 */}
                {this.GenderEditorModalBox()}
                {/* 切换个人信息 */}
                {/* {this.SwitchDisplayInfo()} */}
            </View>
        )
    }
}
const styles = StyleSheet.create({
    container: {
        flexDirection: 'row',
        alignItems: 'center',
        height: 32,
        backgroundColor: 'transparent'
    },
    displayInfoWar: {
        position: "absolute",
        bottom: 20,
        width: "100%",
        height: 50,
        justifyContent: "center",
        alignItems: "center",
    },
    displayInfo: {
        width: "100%",
        height: 40,
        justifyContent: "center",
        alignItems: "center",
        backgroundColor: "#fff"
    },
    text: {
        color: "#333",
        fontSize: 17
    },
    genderEditorModalWarper: {
        flexDirection: "column-reverse",
        backgroundColor: "rgba(0,0,0,0.3)",
        flex: 1
    },
    genderEditorModal: {
        backgroundColor: "#fff",
        borderTopLeftRadius: 10,
        borderTopRightRadius: 10,
        width: "100%",
        height: 266,
        paddingLeft: 26,
        paddingRight: 26
    },
    genderEditorModalTitle: {
        height: 60,
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "space-between",
        borderBottomWidth: 1,
        borderBottomColor: "rgba(240,240,240,0.4)"
    },
    cancelBtn: {
        height: 40,
        width: 40,
        justifyContent: "center",
        alignItems: "center",
    },
    completeBtn: {
        width: 40,
        height: 40,
        justifyContent: "center",
        alignItems: "center"
    },
    completeText: {
        color: "#1890FF",
    },
    EditorAction: {
        width: "100%",
        height: 40,
        marginTop: 30,
        flexDirection: "row",
        justifyContent: "center",
        alignItems: "center",
        backgroundColor: "#F4F4F4",
        borderRadius: 5
    },
    EditorActionNo: {
        width: "100%",
        height: 40,
        marginTop: 30,
        flexDirection: "row",
        justifyContent: "center",
        alignItems: "center",
    },
    genderEditorBoxWarper: {
        paddingTop: 10
    },
    warper: {
        flex: 1,
        backgroundColor: "#f5f5f5"
    },
    padlr: {
        paddingTop: 15,
        paddingLeft: 15,
        paddingRight: 15,
        // backgroundColor: "#fff"
    },

    item: {
        height: 55,
        flexDirection: "row",
        justifyContent: "space-between",
        alignItems: "center",
        marginTop: 5,
        borderBottomColor: "rgb(245,245,245)",
        borderBottomWidth: 1,
        paddingBottom: 10
    },
    row: {
        flexDirection: "row",
        alignItems: "center"
    },
    headPortrait: {
        width: 45,
        height: 50,
        borderRadius: 5
    },
    describe: {
        fontSize: 14,
        color: "#666",
        overflow: 'hidden'
    },
    SystemPrompt: {
        width: 15,
        height: 20,
        marginLeft: 20
    },
    title: {
        fontSize: 16,
        color: "#555",
        // marginBottom: 7,
        lineHeight: 55,
        fontWeight: "700"
    },
})